<template>
  <div class="anti-universe" :class="currentTheme">
    <!-- 输入区域 -->
    <div class="input-section">
      <div class="theme-switcher">
  <span 
    v-for="theme in themes" 
    :key="theme.name"
    @click="currentTheme = theme.name"
    :class="{active: currentTheme === theme.name}"
    :title="theme.label"
  >
    {{ theme.icon }}
  </span>
</div>
<h1>AI 反向平行宇宙</h1>
<h2 class="sub-title">看看平行宇宙的你在干什么？</h2>
<button class="share-btn" @click="sharePage">
  🔗 分享此页面
</button>
      <div class="input-box">
        <input
          type="text"
          v-model="userInput"
          placeholder="请输入一句话"
          @keyup.enter="generateAntiVersion"
        />
        <button @click="generateAntiVersion" class="generate-btn">
          🚀
        
        </button>
        <button @click="generateRandomSentence" class="random-btn">
          🎲
        </button>
      </div>
    </div>

    <!-- 结果显示区域 -->
    <div class="result-section" v-if="result">
      <div class="result-box">
        <div class="original">
          <span class="label">原句：</span>
          <span>{{ result.original }}</span>
        </div>
        <div class="anti-version">
          <span class="label">平行宇宙：</span>
          <span>{{ result.antiVersion }}</span>
          <span v-if="result.credibility !== null" class="credibility" :class="getCredibilityClass(result.credibility)">
            (可信度: {{ (result.credibility * 100).toFixed(0) }}%)
          </span>
        </div>
        <div class="explanation">
          <span class="label">小小的解释：</span>
          <span>{{ result.explanation }}</span>
          <button v-if="result.detailedExplanation" @click="toggleExplanation" class="explanation-toggle">
            {{ showDetailedExplanation ? '收起' : '查看更多' }}
          </button>
          <div v-if="showDetailedExplanation && result.detailedExplanation" class="detailed-explanation">
            {{ result.detailedExplanation }}
          </div>
        </div>
        <!-- <div class="explanation">
          <span class="label">小小的解释：</span>
          <span>{{ result.explanation }}</span>
        </div> -->
      </div>
    </div>

    <!-- 历史记录区域 -->
    <div class="history-section" v-if="history.length > 0">
      <h2>历史记录</h2>
      <div class="history-list">
        <div
          class="history-item"
          v-for="(item, index) in history"
          :key="index"
        >
          <div class="original">{{ item.original }}</div>
          <div class="anti-version">{{ item.antiVersion }}</div>
        </div>
      </div>
    </div>
    <div class="toast" v-if="showToast">{{ toastMessage }}</div>

    <!-- 错误提示 -->
    <div class="error-message" v-if="error">
      {{ error }}
    </div>
    <div v-if="showMask" class="mask">
        <div class="loading-message">
          <div class="loading-spinner big">✨</div>
          <p>正在去往平行宇宙...</p>
          <div class="magic-dust">
            <span v-for="i in 12" :key="i" class="dust-particle"></span>
          </div>
        </div>
      </div>  </div>
</template>

<script>
import axios from 'axios';

export default {

  data() {
    return {
        // Toast 相关状态
        toastMessage: '',        // Toast 消息内容
        showToast: false,        // 是否显示 Toast
        showMask: false,         // 遮罩层显示状态

        // 主题相关配置
        currentTheme: 'light',   // 当前主题
        themes: [
          { name: 'dark', label: '星空主题', icon: '🌌' },
          { name: 'light', label: '阳光主题', icon: '🌞' }, 
          { name: 'mystic', label: '神秘主题', icon: '🔮' },
          { name: 'pastel', label: '梦幻主题', icon: '🌈' }
        ],

        // 用户输入和结果
        userInput: '',           // 用户输入内容
        result: null,           // 生成结果

        // 历史记录
        history: [
          { original: '我喜欢猫', antiVersion: '猫讨厌你' },
          { original: '今天天气很好', antiVersion: '今天天气很差' }
        ],

        // 状态控制
        error: '',              // 错误信息
        loading: false,         // 加载状态
        showDetailedExplanation: false,  // 是否显示详细解释

        // 随机句子列表
        randomSentences: [
          '我喜欢吃苹果',
          '今天天气真好', 
          '这个电影很有趣',
          '我讨厌下雨天',
          '周末要去逛街'
        ]    
      };
  },
  name: 'AntiUniverse',
  created() {
    this.loadHistory();
  },
  methods: {
    generateRandomSentence() {
      const randomIndex = Math.floor(Math.random() * this.randomSentences.length);
      this.userInput = this.randomSentences[randomIndex];
    },
    toggleExplanation() {
      this.showDetailedExplanation = !this.showDetailedExplanation;
    },
    getCredibilityClass(credibility) {
      if (credibility >= 0.8) return 'high';
      if (credibility >= 0.6) return 'medium';
      return 'low';
    },
    sharePage() {
      const url = window.location.href;
      navigator.clipboard.writeText(url)
        .then(() => {
            this.showToastMessage('页面链接已复制到剪贴板');
        })
        .catch(() => {
            this.showToastMessage('复制失败，请手动复制链接');
        });
    },
    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;

      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
    async generateAntiVersion() {
      if (!this.userInput.trim()) {
        this.showToastMessage('请输入有效句子');
        return;
      }

      this.showMask = true; // 开始请求时显示遮罩
      this.loading = true;
      this.error = '';

      try {
        const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
          model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
          messages: [{
            role: 'user',
            content: `
角色：
AI 反义词宇宙生成器

简介：
这是一个能够接收用户输入的句子，并生成完全相反版本的AI。它不仅反转句子的字面意义，还确保生成的句子在逻辑上自洽。
用户输入了：${this.userInput}
技能：
• 逻辑反转：能够理解并反转句子中的主要逻辑和语义。

• 语义合理性检查：确保生成的相反句子在语境和逻辑上是合理的。


规则：
• 必须保持原句的基本结构和意图，但反转其含义。

• 生成的句子必须在逻辑上自洽，不能出现明显的矛盾。


工作流程（输出中间步骤和中间执行结果）：
1. 接收用户输入的句子，例如“我喜欢猫。”。
2. 分析句子的主要逻辑和语义，识别出关键元素如“我”、“喜欢”、“猫”及其关系。
3. 反转句子的主要逻辑和语义，例如将“喜欢”反转为“讨厌”，将“我”和“猫”的位置互换。
4. 进行语义合理性检查，确保生成的句子在逻辑上自洽，例如“猫讨厌你。”。
5. 输出完全相反的版本。

输出格式：
• 生成的完全相反的句子，确保逻辑自洽，例如“猫讨厌你。”。`
        }],
          stream: false,
          max_tokens: 512,
          temperature: 0.7,
          top_p: 0.7,
        }, {
          headers: {
            Authorization: 'Bearer '+ process.env.VUE_APP_API_KEY,
            'Content-Type': 'application/json'
          }
        });

        if (response.data && response.data.choices[0].message.content) {
          const aiResponse = response.data.choices[0].message.content;
          this.result = {
            original: this.userInput,
            antiVersion: aiResponse,
            explanation: 'AI生成的完全相反版本',
            credibility: response.data.credibility || null
          };
          this.saveToHistory(this.result);
        } else {
          this.error = 'AI正在穿越平行宇宙...请稍后再试';
        }
      } catch (error) {
        console.error('API Error:', error);
        this.error = '反义词生成器过载，请重试';
      } finally {
        this.loading = false;
        this.showMask = false; // 请求结束或出错时关闭遮罩
      }
    },

    saveToHistory(result) {
      this.history.unshift({
        original: result.original,
        antiVersion: result.antiVersion,
        credibility: result.credibility
      });
      if (this.history.length > 10) {
        this.history.pop();
      }
      localStorage.setItem('antiUniverseHistory', JSON.stringify(this.history));
    },

    loadHistory() {
      const history = localStorage.getItem('antiUniverseHistory');
      if (history) {
        try {
          this.history = JSON.parse(history);
        } catch (e) {
          console.error('Failed to parse history:', e);
          this.history = [];
        }
      }
    }
  }
};
</script>

<style scoped>
.anti-universe {
  transition: all 0.5s ease;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: '思源黑体', 'Roboto', sans-serif;
  color: #333;
  background: var(--bg-gradient);
  height: 95vh;
}

h1 {
  color: #9C27B0;
  text-align: center;
  margin-bottom: 20px;
}

.input-section {
  margin-bottom: 30px;
}

.input-box {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 12px;
  border: 2px solid #C0C0C0;
  border-radius: 4px;
  font-size: 16px;
}

input:focus {
  border-color: #9C27B0;
  outline: none;
  box-shadow: 0 0 5px rgba(156, 39, 176, 0.5);
}

.generate-btn, .random-btn {
  padding: 0 20px;
  background: var(--button-gradient);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.generate-btn:hover, .random-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
}

.generate-btn:active, .random-btn:active {
  transform: translateY(1px);
}

.random-btn {
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
}

.generate-btn::after, .random-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.generate-btn:active::after, .random-btn:active::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

.result-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #F3E5F5;
  border-radius: 4px;
}

.result-box > div {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  color: #9C27B0;
}

.history-section {
  margin-top: 30px;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 10px;
}

.history-list::-webkit-scrollbar {
  width: 8px;
}

.history-list::-webkit-scrollbar-track {
  background: #EDE7F6;
}

.history-list::-webkit-scrollbar-thumb {
  background: #9C27B0;
  border-radius: 4px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background: #7B1FA2;
}

.history-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #EDE7F6;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.history-item:hover {
  transform: translateX(10px);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.error-message {
  color: #D32F2F;
  text-align: center;
  margin-top: 20px;
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.generate-btn {
  position: relative;
  overflow: hidden;
}

.generate-btn::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
  transform: scale(0);
  transition: transform 0.5s, opacity 1s;
}

.generate-btn:active::after {
  transform: scale(1);
  opacity: 0;
}
.theme-switcher {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.theme-switcher span {
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  background: rgba(255, 255, 255, 0.2);
}

.theme-switcher span:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 0 15px currentColor;
}

.theme-switcher span.active {
  transform: scale(1.2) rotate(0deg);
  box-shadow: 0 0 20px currentColor;
  animation: bounce 0.5s;
  background: rgba(255, 255, 255, 0.4);
}

@keyframes bounce {
  0%, 100% { transform: scale(1.2); }
  50% { transform: scale(1.3); }
}

.dark {
  --primary-color: #9c7aff;
  --secondary-color: #5f27cd;
  --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --text-color: #e2e2e2;
  --input-bg: rgba(28, 28, 46, 0.7);
  --card-bg: rgba(28, 28, 46, 0.7);
  --border-color: #9c7aff;
  --glow-color: rgba(156, 122, 255, 0.5);
  --button-gradient: linear-gradient(45deg, #9c7aff, #5f27cd);
  --footer-color: #9c7aff;
}

.light {
  --primary-color: #ff6b6b;
  --secondary-color: #48dbfb;
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --text-color: #333;
  --input-bg: rgba(255, 255, 255, 0.9);
  --card-bg: rgba(255, 255, 255, 0.9);
  --border-color: #ff6b6b;
  --glow-color: rgba(255, 107, 107, 0.5);
  --button-gradient: linear-gradient(45deg, #ff6b6b, #48dbfb);
  --footer-color: #5f27cd;
}

.mystic {
  --primary-color: #1dd1a1;
  --secondary-color: #2e86de;
  --bg-gradient: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  --text-color: #e2e2e2;
  --input-bg: rgba(15, 32, 39, 0.7);
  --card-bg: rgba(15, 32, 39, 0.7);
  --border-color: #1dd1a1;
  --glow-color: rgba(29, 209, 161, 0.5);
  --button-gradient: linear-gradient(45deg, #1dd1a1, #2e86de);
  --footer-color: #1dd1a1;
}

.pastel {
  --primary-color: #ff9ff3;
  --secondary-color: #feca57;
  --bg-gradient: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%);
  --text-color: #5f27cd;
  --input-bg: rgba(255, 255, 255, 0.9);
  --card-bg: rgba(255, 255, 255, 0.9);
  --border-color: #ff9ff3;
  --glow-color: rgba(255, 159, 243, 0.5);
  --button-gradient: linear-gradient(45deg, #ff9ff3, #feca57);
  --footer-color: #5f27cd;
}
.share-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.sub-title {
  color: var(--primary-color);
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px var(--glow-color);
  transition: all 0.3s ease;
}

.share-btn {
  background: var(--button-gradient);
  font-size: 1em;
  box-shadow: 0 0 10px var(--glow-color);
  transition: all 0.3s ease;
}

.share-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--glow-color);
}


/* 移动端适配 */
@media (max-width: 768px) {
  /* 调整输入区样式 */
  .input-area {
    width: 90%;
    margin: 0 auto;
  }

  /* 调整结果显示区样式 */
  .result-area {
    width: 90%;
    margin: 0 auto;
  }

  /* 调整历史记录区样式 */
  .history-area {
    width: 90%;
    margin: 0 auto;
  }
}


  /* 加载动画 */
  .loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
  }
  
  .loading-spinner.big {
    font-size: 50px;
    color: white;
    margin-bottom: 20px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .loading-message {
    text-align: center;
    color: white;
    position: relative;
  }
  
  .loading-message p {
    margin-top: 15px;
    font-size: 20px;
  }
  
  .magic-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .dust-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    animation: dust 3s infinite linear;
  }
  
  .dust-particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
  }
  .dust-particle:nth-child(2) {
    top: 30%;
    left: 30%;
    animation-delay: 0.5s;
  }
  .dust-particle:nth-child(3) {
    top: 10%;
    left: 60%;
    animation-delay: 1s;
  }
  .dust-particle:nth-child(4) {
    top: 40%;
    left: 80%;
    animation-delay: 1.5s;
  }
  .dust-particle:nth-child(5) {
    top: 70%;
    left: 20%;
    animation-delay: 2s;
  }
  .dust-particle:nth-child(6) {
    top: 60%;
    left: 50%;
    animation-delay: 2.5s;
  }
  .dust-particle:nth-child(7) {
    top: 80%;
    left: 70%;
    animation-delay: 0.7s;
  }
  .dust-particle:nth-child(8) {
    top: 20%;
    left: 90%;
    animation-delay: 1.2s;
  }
  .dust-particle:nth-child(9) {
    top: 50%;
    left: 10%;
    animation-delay: 1.7s;
  }
  .dust-particle:nth-child(10) {
    top: 30%;
    left: 70%;
    animation-delay: 2.2s;
  }
  .dust-particle:nth-child(11) {
    top: 70%;
    left: 40%;
    animation-delay: 0.3s;
  }
  .dust-particle:nth-child(12) {
    top: 90%;
    left: 60%;
    animation-delay: 0.8s;
  }
  
.toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  z-index: 1000;
  animation: fadeInOut 3s;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .toast {
  background-color: rgba(255, 255, 255, 0.9);
  color: #121212;
}
</style>

<!-- 添加宇宙卡片样式 -->
<style scoped>
.universe-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.universe-card {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
}

.universe-card:hover {
  transform: translateY(-5px);
}

.universe-card.our-universe {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.universe-card.anti-universe {
  background: linear-gradient(135deg, #E8EAF6, #C5CAE9);
}

.universe-icon {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.credibility-meter {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.meter-fill.high {
  background-color: #4CAF50;
}

.meter-fill.medium {
  background-color: #FFC107;
}

.meter-fill.low {
  background-color: #F44336;
}

.credibility-text {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  color: #757575;
}

.explanation-toggle {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 10px;
}
</style>